<template>
	<div class="mainContent"  >
		<div class="w_title">
			<span style="font-size: 28px;line-height: 60px;font-weight: bold;color: white;">
				流浪梦想
			</span>
		</div>
		<div class="photos " id="photos">
			<img src="../../../assets/image/charity/swiper/child-2.jpeg" alt="" class="img1 imgimg" />
			<img src="https://img2.baidu.com/it/u=2829054227,4202553613&fm=26&fmt=auto&gp=0.jpg" alt="" class="img2 imgimg" />
			<img src="https://img1.baidu.com/it/u=1651274715,2974154717&fm=26&fmt=auto&gp=0.jpg" alt="" class="img3 imgimg" />
			<img src="https://img2.baidu.com/it/u=1937268223,700216936&fm=26&fmt=auto&gp=0.jpg" alt="" class="img4 imgimg" />
		</div>

		<div class="mainBox ">
			<div class="tu">
				<img src="../../../assets/image/home/ymsc.jpeg" />
			</div>
			<div class="boxs" @click="toYm">
				<br />
				<p>
					义卖商城
				</p>
				<br />
				<div class="boxs_content">
					&nbsp;&nbsp;&nbsp;&nbsp;你想做慈善吗？你想帮助困难孩子吗?你想买到想要的商品吗?<br />&nbsp;&nbsp;&nbsp;&nbsp;快来我们义卖商城看看吧!
				</div>
			</div>
		</div>
		<!-- <div class="mainBox img2 hv"><span></span></div> -->
		<div class="mainBox">
			<div class="tu">
				<img src="../../../assets/image/home/zc.jpeg" />
			</div>
			<div class="boxs" @click="tozc">
				<br />
				<p>
					众筹
				</p>
				<br />
				<div class="boxs_content">
					&nbsp;&nbsp;&nbsp;&nbsp;你想做慈善吗？你想帮助困难孩子吗？快来我们一起众筹吧!
				</div>
			</div>
		</div>
		<div class="mainBox">
			<div class="tu">
				<img src="../../../assets/image/home/jz.jpg" />
			</div>
			<div class="boxs" @click="tojz">
				<br />
				<p>
					公益捐赠
				</p>
				<br />
				<div class="boxs_content">
					&nbsp;&nbsp;&nbsp;&nbsp;你想做慈善吗？你想帮助困难孩子吗？快来给孩子们捐点东西吧!
				</div>
			</div>
		</div>
		<br />

		<div class="mainBox">
			<div class="tu">
				<img src="../../../assets/image/home/xs.jpeg" />
			</div>
			<div class="boxs" @click="tozz">
				<br />
				<p>
					学生资助
				</p>
				<br />
				<div class="boxs_content">
					&nbsp;&nbsp;&nbsp;&nbsp;有很多穷苦山区孩子等待帮助，让我们一起尽绵薄之力来帮助他们吧！
				</div>
			</div>
		</div>
		<div class="mainBox">
			<div class="tu">
				<img src="https://img1.baidu.com/it/u=468612102,2017401313&fm=26&fmt=auto&gp=0.jpg" />
			</div>
			<div class="boxs" @click="tomx">
				<br />
				<p>
					梦想
				</p>
				<br />
				<div class="boxs_content">
					&nbsp;&nbsp;&nbsp;&nbsp;每个人都有梦想，你愿意帮助这些祖国的花朵实现他们的梦想吗？来我们这里帮他们离梦想再进一步吧！
				</div>
			</div>
		</div>

		<div class="mainBox" @click="toqt">
			<div class="tu">
				<img src="../../../assets/image/home/wwdx.jpeg" />
			</div>
			<!-- <div class="boxs"><br />
			</div> -->
		</div>
		<br />
	</div>
</template>

<script>
	export default {
		name: "dreamList",
		data(){
			return{
				
			}
		},
		methods: {
			mouseEnter() {
					$(".mainBox").addClass('animated fadeIn');	
			},
			mouseLeave() {
					$(".mainBox").removeClass('animated lightSpeedIn');
			},
			toYm() {
				this.$router.push('/charity/charityMall')
			},
			tojz() {
				this.$router.push('/charity/persondonation')
			},
			tozc() {

				this.$router.push('/dream')
			},
			tozz() {
				this.$router.push('/charity/persondonation')
			},
			tomx() {
				this.$router.push('/dream')
			},
			toqt() {

			},
			

		},
		watch:{
			
		},
		mounted(){
			
		}
	}
</script>

<style scoped>
	.mainContent {
		width: 85%;
		height: 1200px;
		margin: 40px auto;
		text-align: center;
		position: relative;
		align-items: center;
	}

	.w_title {
		width: 100%;
		height: 60px;
		background-color: orange;
		text-align: center;
	}

	.photos {
		width: 100%;
		height: 30%;
		margin-top: 20px;
		position: relative;
		background-image: url(../../../assets/image/home/wall.jpg);
		border-radius: 25px;
	}

	.photos>img {
		width: 210px;
		border: 1px solid #ddd;
		padding: 10px;
		background-color: #fff;
		position: absolute;
		transition: all 0.5s;
	}

	.photos .img1 {
		top: 60px;
		left: 125px;
		transform: rotate(7deg);
		width: 230px;
		height: 135px;
	}

	.photos .img2 {
		top: 60px;
		width: 230px;
		height: 150px;
		right: 420px;
		transform: rotate(-15deg);
	}

	.photos .img3 {
		top: 120px;
		right: 130px;
		width: 230px;
		height: 135px;
		transform: rotate(10deg);
	}

	.photos .img4 {
		top: 140px;
		left: 380px;
		transform: rotate(0deg);
	}

	.img1 {
		background-image: url(../../../assets/image/home/img1.png);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 15px;
	}

	.img2 {
		background-image: url(../../../assets/image/home/img2.jpeg);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 15px;
	}

	.img3 {
		background-image: url(../../../assets/image/home/img3.jpeg);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 15px;
	}

	.img4 {
		background-image: url(../../../assets/image/home/img3.jpeg);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		border-radius: 15px;
	}

	.photos>img:hover {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
		transform: scale(1.2);
		z-index: 666;
	}

	.mainBox {
		width: 20%;
		height: 310px;
		margin-top: 5%;
		margin-left: 9%;
		float: left;
		text-align: center;
		text-transform: uppercase;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
		box-shadow: 2px 3px 3px rgb(139, 138, 138);
		cursor: pointer;
		border-radius: 3px;
	}

	.mainBox:hover {
		box-shadow: 2px 3px 10px rgb(36, 35, 35);
		transform: translate(0, -5px);
		transition-delay: 0s !important;
	}

	.tu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.tu img {
		width: 100%;
		height: 100%;
		transition: all 0.5s;
	}

	.tu img:hover {
		transform: scale(1.2);
		filter: blur(1px);
	}

	.hv:hover {
		-webkit-transition: -webkit-transform 1s linear;
		-webkit-transform: rotateX(30deg);
	}

	.boxs {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: white;
		top: 80%;
		left: 0;
		z-index: 2;
		opacity: 1;
		transition: all 0.8s;
		background-color: rgba(191, 191, 191, 0.7);
		/* background-color: transparent; */
		font-size: 24px;
	}

	.boxs:hover {
		top: 40%;
	}

	.boxs_content {
		font-size: 16px;
		text-align: left;
		line-height: 25px;
	}
</style>
